<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="71%"
      :before-close="handleClose"
      :show-close="false"
    >
      <div class="title">
        <span>修改用户</span>
      </div>
      <div class="content">
        <table>
          <tr>
            <td>
              <span>姓名:</span>
              <input type="text" v-model="addInfo.name" maxlength="13" />
            </td>
            <td>
              <span>性别:</span>
              <!-- <input type="text" v-model="addInfo.sex"> -->
              <el-radio v-model="addInfo.sex" label="1">男</el-radio>
              <el-radio v-model="addInfo.sex" label="2">女</el-radio>
            </td>
            <td>
              <span>出生年月:</span>
              <el-date-picker
                v-model="addInfo.birthday"
                :picker-options="pickerOptions"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <!-- <input type="text" v-model="addInfo.birthday"> -->
            </td>
            <td>
              <span>身份证号:</span>
              <input
                type="number"
                v-model="addInfo.idNumber"
                oninput="if(value.length>18)value=value.slice(0,18)"
              />
            </td>
          </tr>
          <tr>
            <td>
              <span>民族:</span>
              <input
                type="text"
                v-model="addInfo.ethnicGroups"
                maxlength="10"
              />
            </td>
            <td>
              <span>电话号码:</span>
              <input
                type="number"
                v-model="addInfo.telephone1"
                oninput="if(value.length>11)value=value.slice(0,11)"
              />
            </td>
            <td>
              <span>等级分数:</span>
              <!-- <input type="number" v-model="addInfo.points" disabled> -->
              <span>{{ addInfo.points }}</span>
            </td>
            <td>
              <span>学号:</span>
              <input
                type="number"
                v-model="addInfo.studentId"
                oninput="if(value.length>18)value=value.slice(0,18)"
              />
            </td>
          </tr>
          <tr>
            <!-- 暂未设置 -->
            <td>
              <span>关联评分表:</span>
              <el-select v-model="value1" multiple placeholder="请选择">
                <el-option
                  v-for="item in scoreData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!-- <input type="text" v-model="addInfo.name"> -->
            </td>
            <!-- 暂无 -->
            <td>
              <span>组织机构:</span>
              <!-- <input type="text" v-model="addInfo.name"> -->
              <el-cascader
                v-model="defaultVal"
                :options="organizationList"
                :props="{
                  multiple: true,
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                  emitPath: false,
                  checkStrictly: true,
                }"
                @change="handleChange"
                :show-all-levels="false"
                clearable
              ></el-cascader>
            </td>
            <td>
              <span>辅导员:</span>
              <input type="text" v-model="addInfo.counselor" maxlength="13" />
            </td>
            <td>
              <span>状态:</span>
              <el-select
                v-model="addInfo.userStatus"
                placeholder="请选择活动区域"
              >
                <el-option label="待审核" value="1"></el-option>
                <el-option label="已审核" value="2"></el-option>
                <el-option label="禁用" value="3"></el-option>
              </el-select>
              <!-- <input type="text" v-model="addInfo.status"> -->
            </td>
          </tr>
          <tr>
            <td>
              <span>身份类型:</span>
              <el-select v-model="addInfo.type" placeholder="请选择活动区域">
                <el-option label="系统管理员" value="1"></el-option>
                <el-option label="学校管理员" value="2"></el-option>
                <el-option label="老师" value="3"></el-option>
                <el-option label="学生" value="4"></el-option>
              </el-select>
              <!-- <input type="text" v-model="addInfo.type"> -->
            </td>
            <td>
              <span>入学时间:</span>
              <el-date-picker
                v-model="addInfo.enrollmentDate"
                :picker-options="pickerOptions"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <!-- <el-date-picker
      v-model="addInfo.enrollmentdate"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker> -->
              <!-- <input type="text" v-model="addInfo.enrollmentdate"> -->
            </td>
            <td>
              <span>专本科:</span>
              <!-- <input type="text" v-model="addInfo.lszk">
                   -->
              <el-radio v-model="addInfo.lsZk" label="1">专科</el-radio>
              <el-radio v-model="addInfo.lsZk" label="2">本科</el-radio>
            </td>
            <td>
              <span>学校:</span> <input type="text" v-model="addInfo.school" />
            </td>
          </tr>
          <tr>
            <td>
              <span>QQ号:</span>
              <input
                type="number"
                v-model="addInfo.qq"
                oninput="if(value.length>15)value=value.slice(0,15)"
              />
            </td>
            <td>
              <span>微信号:</span>
              <input type="text" v-model="addInfo.weChat" maxlength="15" />
            </td>
            <td>
              <span>籍贯:</span>
              <input type="text" v-model="addInfo.hometown" maxlength="20" />
            </td>
            <td>
              <span>生源地属性:</span>
              <input type="text" v-model="addInfo.sourceAttr" maxlength="20" />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <span>生源地:</span>
              <input
                type="text"
                name=""
                id=""
                v-model="addInfo.sourceAddr"
                maxlength="20"
              />
            </td>
            <td colspan="2">
              <!-- <td colspan="2"><input type="text" name="" id="" placeholder="创建时间"> -->
              <span>创建时间：{{ addInfo.createTime }}</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="btn">
        <button @click="cancel">取消</button>
        <button @click="confirmAdd">提交</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDepartment, editUser } from '../../../api/systemManage/user';
import {getScoreList} from '../../../api/scoreManage/score';
export default {
  data() {
    return {
      dialogVisible: false,
      addInfo: {
        age: '',
        bedroom: '',
        birthday: '',
        bloodtype: 0,
        bodyweight: 0,
        constellation: '',
        counselor: '',
        departmentIdList: [],
        enrollmentdate: '',
        ethnicgroups: '',
        fathercompany: '',
        fatherjobtitle: '',
        fathername: '',
        fatherpolitical: 0,
        fathertelephone: '',
        homeaddr: '',
        hometown: '',
        idnumber: '',
        jobtitle: '',
        lszk: '1',
        memo: '',
        mothercompany: '',
        motherjobtitle: '',
        mothername: '',
        motherpolitical: 0,
        mothertelephone: '',
        name: '',
        parentid: 0,
        personality: '',
        points: 0,
        political: 0,
        postcode: '',
        pwd: '',
        qq: '',
        school: '',
        sex: '1',
        sourceaddr: '',
        sourceattr: '',
        status: '1',
        studentid: 0,
        telephone1: '',
        telephone2: '',
        type: '1',
        uclass: '',
        userevaluationIdList: [],
        wechat: ''
      },
      options: [
        {
          value: 'zhinan',
          label: '指南'
        }, {
          value: 'zujian',
          label: '组件'
        }, {
          value: 'ziyuan',
          label: '资源'
        }],
      value1: [], // 关联评分表默认数据
      scoreData: [],
      organizationList: [],
      organizationIdList: [],
      defaultVal: [3],
      selectOrganizationList: [],
      editInfo: {
        'age': 0,
        'bedroom': '',
        'birthday': '',
        'bloodtype': 0,
        'bodyweight': 0,
        'constellation': '',
        'counselor': '',
        'enrollmentdate': '',
        'ethnicgroups': '',
        'fathercompany': '',
        'fatherjobtitle': '',
        'fathername': '',
        'fatherpolitical': 0,
        'fathertelephone': '',
        'homeaddr': '',
        'hometown': '',
        'id': 0,
        'idnumber': '',
        'jobtitle': '',
        'lszk': 0,
        'memo': '',
        'mothercompany': '',
        'motherjobtitle': '',
        'mothername': '',
        'motherpolitical': 0,
        'mothertelephone': '',
        'name': '',
        'parentid': 0,
        'personality': '',
        'political': 0,
        'postcode': '',
        'pwd': '',
        'qq': '',
        'school': '',
        'sex': 0,
        'sourceaddr': '',
        'sourceattr': '',
        'status': 0,
        'studentid': 0,
        'telephone1': '',
        'telephone2': '',
        'type': 0,
        'uclass': '',
        'wechat': ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; // 如果没有后面的-8.64e6就 是不可以选择今天的
        }
      },
      organizationData: []
    };
  },
  methods: {
    // props: [ 'getTableData' ],
    openEdit(val) {
      this.getDepartmentList();
      this.scoreList();
      // console.log('传过来的数据', val);
      const data = JSON.parse(val);
      console.log('传过来的数据', data);
      this.addInfo = data;
      this.addInfo.sex = this.addInfo.sex + '';
      this.addInfo.idNumber = this.addInfo.idNumber + '';
      this.addInfo.lsZk = this.addInfo.lsZk + '';
      this.dialogVisible = true;
      this.addInfo.type = this.addInfo.type + '';
      this.addInfo.userStatus = this.addInfo.userStatus + '';
      // this.addInfo.createTime
      if (this.addInfo.enrollmentDate !== null) {
        this.addInfo.enrollmentDate = this.addInfo.enrollmentDate.slice(0, 10);
      } else {
        this.addInfo.enrollmentDate = '';
      }
      // this.value1
      // this.selectOrganizationList = data.departmentIdList;
      // console.log(this.selectOrganizationList);
      // this.organizationData = data.departmentIdList;
      // 给组织机构加上默认数据
      this.defaultVal = [];
      if (data.departmentIdList.length > 0) {
        data.departmentIdList.forEach(item => {
          this.defaultVal.push(item.id);
        });
        console.log(this.defaultVal);
      } else {
        this.defaultVal = [];
      }
      // 评分表数据
      this.value1 = [];
      if (data.score.length > 0) {
        data.score.forEach(item => {
          this.value1.push(item.scoreId);
        });
        // this.value1 = [data.score[0].scoreId];
        // console.log(this.value1);
      } else {
        this.value1 = [];
      }
    },
    // // 点击提交确认修改
    // async confirmAdd() {
    //   console.log('提交');
    //   const res = await editUser(JSON.stringify(this.addInfo));
    //   console.log(res);
    //   if (res.code === 200) {
    //     console.log('成功');
    //     this.dialogVisible = false;
    //     this.$parent.getTableData();
    //   }
    // },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 点击取消
    cancel() {
      this.defaultVal = [];
      this.dialogVisible = false;
    },
    // 获取创建时间
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = '-';
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = '0' + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    // 点击提交
    async confirmAdd() {
      // console.log('提交', this.organizationList);
      this.editInfo.name = this.addInfo.name.trim();
      this.editInfo.sex = this.addInfo.sex;
      this.editInfo.birthday = this.addInfo.birthday;
      this.editInfo.idnumber = this.addInfo.idNumber;
      this.editInfo.ethnicgroups = this.addInfo.ethnicGroups;
      this.editInfo.telephone1 = this.addInfo.telephone1;
      // this.editInfo.points = this.addInfo.points; //等级分数
      this.editInfo.studentid = this.addInfo.studentId;
      this.editInfo.counselor = this.addInfo.counselor;
      this.editInfo.status = this.addInfo.userStatus;
      this.editInfo.type = this.addInfo.type;
      this.editInfo.enrollmentdate = this.addInfo.enrollmentDate;
      this.editInfo.lszk = this.addInfo.lsZk;
      this.editInfo.school = this.addInfo.school;
      this.editInfo.qq = this.addInfo.qq;
      this.editInfo.wechat = this.addInfo.weChat;
      this.editInfo.hometown = this.addInfo.hometown;
      this.editInfo.id = this.addInfo.id;
      this.editInfo.sourceattr = this.addInfo.weChat; // 生源地属性
      this.editInfo.sourceaddr = this.addInfo.sourceAddr;
      // 将评分表和组织机构加到修改的数据里面
      this.editInfo = {...this.editInfo, departmentIdList: this.defaultVal, scoreId: [...this.value1]};
      // console.log('编辑', this.editInfo);
      if (this.editInfo.enrollmentdate === '' || this.editInfo.enrollmentdate === null) {
        this.editInfo = {...this.editInfo, enrollmentdate: this.editInfo.enrollmentdate};
      } else {
        this.editInfo = {...this.editInfo, enrollmentdate: this.editInfo.enrollmentdate + ' 00:00:00'};
      }
      // if (this.editInfo.enrollmentdate !== '' || ) {
      //   this.editInfo = {...this.editInfo, enrollmentdate: this.editInfo.enrollmentdate + ' 00:00:00'};
      // }
      console.log('编辑1', this.editInfo);
      if (this.editInfo.birthday !== null) {
        this.editInfo = {...this.editInfo, birthday: this.editInfo.birthday + ' 00:00:00'};
      }
      console.log(this.editInfo);
      if (this.editInfo.name === '' || this.editInfo === null) {
        // this.$message('请输入用户名！');
        this.$message({
          showClose: true,
          message: '请输入用户名！'
        });
      } else if (this.editInfo.type === '') {
        // this.$message('请选择身份类型！');
        this.$message({
          showClose: true,
          message: '请选择身份类型！'
        });
      } else if (this.editInfo.idnumber.length !== 18 && this.editInfo.idnumber.length > 0) {
        console.log(this.editInfo.idnumber);
        // this.$message('请输入正确的身份证号！');
        this.$message({
          showClose: true,
          message: '请输入正确的身份证号！'
        });
      } else {
        if (this.editInfo.type === '4' && this.editInfo.scoreId.length > 1) {
          // this.$message.error('修改失败，一个学生只能关联一个评分表');
          this.$message({
            showClose: true,
            message: '修改失败，一个学生只能关联一个评分表',
            type: 'error'
          });
        } else {
          const res = await editUser(JSON.stringify(this.editInfo));
          console.log(res);
          if (res.code === 200) {
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });
            this.dialogVisible = false;
            this.editInfo = {};
            this.value1 = [];
            this.organizationIdList = [];
            this.selectOrganizationList = [];
            this.$parent.getTableData();
          } else {
            // this.$message.error('修改失败');
            this.$message({
              showClose: true,
              message: '修改失败',
              type: 'error'
            });
          }
        }
      }
      this.defaultVal = [];
    },
    // 获取组织机构树
    async getDepartmentList() {
      const res = await getDepartment();
      console.log('获取组织机构树', res);
      this.organizationList = res.data;
      this.removeChildren(this.organizationList);
    },
    // 递归去掉空的children
    removeChildren(list) {
      // console.log(list);
      if (list) {
        list.forEach(item => {
          if (item.children.length < 1) {
            delete item.children;
          }
          this.removeChildren(item.children);
        });
      }
    },
    // 获取用户选择的组织机构
    handleChange(value) {
      console.log(value);
      // this.selectOrganizationList = value;
      this.defaultVal = value;
    },
    // 获取评分列表
    async scoreList() {
      const res = await getScoreList({p: 1, ps: 1000});
      console.log('评分列表', res);
      this.scoreData = res.data.records;
    }
  }
};
</script>

<style scoped lang="less">
.title {
  width: 100%;
  height: 45px;
  background: #f1f5ff;
  text-align: center;
  line-height: 45px;
  span {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
  }
}
.content {
  padding: 20px 30px;
  table {
    border-collapse: collapse;
    tr {
      td {
        border: 1px solid #e6ebff;
        height: 48px;
        // max-width: 311px;
        width: 20%;
        padding-left: 10px;
        input {
          border: 0;
          height: 90%;
          width: 50%;
          outline: none;
        }
        /deep/.el-input__inner {
          // height: 90%;
          // height: 90%;
          min-height: 43px;
        }
        //   /deep/.el-icon-arrow-up::before {
        //   content: "\E6DF";
        //   // width: 39px;
        //   // height: 39px;
        //   background: none;
        //   border-left: 0;
        //   position: static;
        //   // margin-right: 5px;
        //   }
        //   /deep/ .el-select__caret {
        // transition: none;
        // transform: none;
        // // animation: rotatefresh;
        // margin-right: 5px;
        // }
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 72%;
        }
        .el-select {
          width: 66%;
        }
        .el-cascader {
          width: 72%;
          // height: 48px;
          // height: 100%;
        }
      }
    }
    tr td:focus-within {
      box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0,
        inset 0 -0.005208rem 0.020833rem 0 #2fc0e0,
        inset 0.005208rem 0 0.020833rem 0 #2fc0e0,
        inset -0.005208rem 0 0.020833rem 0 #2fc0e0;
    }
  }
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 40px;
  button {
    width: 100px;
    height: 35px;
    background: #e8f8fb;
    border-radius: 4px;
    color: #2fc0e0;
    margin: 0px 10px;
    &:nth-child(2) {
      color: white;
      background: #2fc0e0;
      box-shadow: 0 0 5px #2fc0e0;
    }
  }
}
/deep/.el-dialog__header,
/deep/.el-dialog__body {
  padding: 0;
}
/deep/.el-dialog {
  // width: 770px;
  box-shadow: 3px 3px 11px 0px #3d3d3d;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
button {
  cursor: pointer;
}
</style>
